<template>
	<div class="mypage allbgc">
		<!-- {{$store.state.a}} -->
		<!-- $store.commit('在mutations里的方法名',要改的值) -->
		<!-- <button @click="$store.commit('changea',2)">改</button> -->

		<!-- 已经登陆显示这个 -->
		<div class="mypage-top" v-if="isLogin">
			<div class="mypage-name">
				<p><i><img :src="avatar"></i>{{nickname}}</p>
				<button>
					<router-link to="/user">编辑资料</router-link>
				</button>
			</div>
			<div class="mypage-good">
				<div><span>1</span><em>头条</em></div>
				<div><span>3</span><em>获赞</em></div>
			</div>
			<div class="mypage-like">
				<div><span>
						<van-icon name="star-o" color="#ec5779" size="6vw" /></span><em>收藏</em></div>
				<div><span>
						<van-icon name="clock-o" color="#ff9d1d" size="6vw" /></span><em>历史</em></div>
			</div>
		</div>

		<!-- 尚未登陆显示这个 -->
		<div class="mypage-top-n" v-else @click="$router.push('/log')">
			<div>
				登录 / 注册
			</div>
		</div>

		<!-- 展示箭头 -->
		<div class="mypage-main">
			<van-cell title="修改密码" is-link />
			<van-cell title="联系我们" is-link />
			<van-cell title="关于我们" is-link />
		</div>

		<div class="mypage-quit">
			<button @click="logout">退出登录</button>
		</div>
	</div>
</template>

<script>
	import {
		Dialog
	} from 'vant';
	import {
		mapState
	} from 'vuex'; //也可以不用这个 自己进行封装 如下
	// function mapState(arr){
	// 	let obj={};
	// 	arr.forEach(v=>{
	// 		obj[v]=function(){
	// 			return this.$store.state[v]
	// 		}
	// 	})
	// 	return obj 
	// }
	export default {
		name: "my",
		data() {
			return {
				avatar: "https://img2.baidu.com/it/u=877813231,1223222462&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
				nickname: "一条鱼"
			}
		},
		components: {
			[Dialog.Component.name]: Dialog.Component,
		},
		// vuex 全局的响应式变量   数据在内存中存放 一刷新就没了
		computed: {
			...mapState(['uid', 'token', 'isLogin', 'userInfo']) //是下面注释的的简写
			// uid(){
			// 	return this.$store.state.uid
			// },
			// token(){
			// 	return this.$store.state.token
			// }

		},
		methods: {
			nolog() {
				this.$toast('尚未登录，请先去登录');
			},
			logout() {
				Dialog.confirm({
						title: '提示',
						message: '您确定要退出登录吗',
					})
					.then(() => {
						// on confirm
						localStorage.clear() //清除所有token
						// localStorage.removeItem("token") 清除指定的token
						this.$store.commit('clear')
						this.$toast('退出成功');
						this.$router.push('/home')
					})
					.catch(() => {
						// on cancel
					});
			}
			// 用async  await方法
			// async logout(){
			// 	let res=await Dialog.confirm({
			// 		title:"提示",
			// 		message: '您确定要退出登录吗'
			// 	});
			// 	if(res=='confirm'){
			// 		localStorage.clear() //清除所有token
			// 		// localStorage.removeItem("token") 清除指定的token
			// 		this.$store.commit('clear')
			// 		this.$toast('退出成功');
			// 		this.$router.push('/home')
			// 	}
			// }
		}
	}
</script>

<style lang="less">
	.mypage {
		position: relative;
	}

	.mypage-top-n {
		height: 180px;
		line-height: 180px;
		text-align: center;
		background-color: @color;
		color: #fff;
	}

	.mypage-name {
		height: 110px;
		line-height: 110px;
	}

	.mypage-name i {
		display: block;
	}

	.mypage-name p,
	.mypage-good span {
		font-size: 16px;
	}

	.mypage-name img {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		position: absolute;
		left: 24px;
		top: 24px;
	}

	.mypage-name p {
		width: 50px;
		margin-left: 110px;
		color: #fff;
		padding-top: 8px;
	}

	.mypage-name button {
		width: 80px;
		height: 18px;
		line-height: 18px;
		background-color: #fff;
		border: none;
		border-radius: 15px;
		position: absolute;
		right: 30px;
		top: 55px;
		font-size: 14px;
	}

	.mypage-name,
	.mypage-good {
		background-color: @color;
	}

	.mypage-good,
	.mypage-like {
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.mypage-good>div,
	.mypage-like>div {
		width: 50%;
	}

	.mypage-good {
		color: #fff;
		padding: 10px 0;
	}

	.mypage-like {
		background-color: #fff;
		padding-bottom: 10px;
	}

	.mypage-like em,
	.mypage-good em {
		font-style: normal;
		font-size: 14px;
	}

	.mypage-like span {
		margin: 4px 0;
	}

	.mypage .van-cell__title {
		text-align: left;
	}

	.mypage .van-nav-bar__content {
		background-color: @color;
	}

	.mypage .van-nav-bar .van-icon,
	.van-nav-bar__title {
		color: #fff;
	}

	.mypage-main {
		margin: 10px 0;
	}

	.mypage-quit button {
		width: 100%;
		background-color: #fff;
		border: none;
		height: 40px;
		color: #f00;
	}
</style>
